<template>
  <div class="main-container">
    <a-card class="layout-card">
      <template #title>
        <span style="font-weight: 700">模板下载</span>
      </template>

      <a-row :gutter="24">
        <a-col :span="4">
          <a-button type="primary" @click="dowFun('教师校验模板')" :loading="subloading">
            教师校验模板
          </a-button>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="dowFun('教师模板')" :loading="subloading">
            教师模板
          </a-button>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="dowFun('学院模板')" :loading="subloading">
            学院模板
          </a-button>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="dowFun('查分文件模板')" :loading="subloading">
            查分文件模板
          </a-button>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage'

const { createConfirm } = useMessage()

const subloading = ref<Boolean>(false)

function dowFun(tyep) {
  subloading.value = true

  if (!tyep) return
  let name =
    tyep == '教师校验模板'
      ? 'import-template-2-js-check.xlsx'
      : tyep == '教师模板'
      ? 'import-template-2-jsxx.xlsx'
      : tyep == '查分文件模板'
      ? 'import-template-2-cfwj.xls'
      : 'import-template-1-xy.xlsx'

  createConfirm({
    title: `是否下载‘${tyep}’模板？`,
    content: '',
    iconType: 'warning',
    onOk: async () => {
      let a = document.createElement('a')
      a.href = `/resource/file/${name}`
      a.type = 'download'
      a.download = tyep
      a.click()
      subloading.value = false
    },
    onCancel: () => {
      subloading.value = false
    },
  })
}

onMounted(async () => {})
</script>

<style lang="less" scoped>
.main-container {
  // height: @c_height;
  .layout-card {
    height: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
  }
}
</style>
